
<template>
  <div>
    <h1 ref="mouseRef">鼠标坐标小练习</h1>
    <div>x坐标：{{x}}</div>
    <div>y坐标:{{y}}</div>
    <!-- <h1 @click="say">{{name}}</h1> -->
    <router-link :to="{name:'hello',query:{pid:888}}">
      去到hello页
    </router-link>
    <input type="text"
           ref="myinp" />
    <button @click="turnHello">去到hello页面</button>
  </div>
</template>
<script lang="ts">
import getMouse from "./hooks/MouseHook";
import { defineComponent, onMounted, ref, nextTick } from "vue";
// vue3的路由编程式跳转
// useRouter() 一个方法 获取到 路由操作对象
// useRoute() 一个函数  获取到 参数操作对象

import {
  useRouter,
  useRoute,
  onBeforeRouteLeave,
  onBeforeRouteUpdate,
} from "vue-router";

// import  myMinxin from './hooks/mixins'
export default defineComponent({
  // mixins:[myMinxin],
  // data(){
  //   return{
  //     x:0,
  //     y:0,
  //     name:"李四"
  //   }
  // },
  // methods:{
  //   getMouse(e){
  //       this.x=e.clientX;
  //       this.y=e.clientY;
  //   },
  //   say(){
  //     alert("222")
  //   }
  // },
  mounted() {
    //绑定鼠标移动事件
    // this.$refs.mouseRef.style.background="red";
    // document.addEventListener("mousemove",this.getMouse)
  },
  // beforeDestroy() {
  //     // 移除鼠标移动事件
  //   document.removeEventListener("mousemove",this.getMouse)
  // },
  setup() {
    // 导入拆分出去的hook文件 调用得到数据或函数等
    let { x, y } = getMouse();
    // vue3的setup 无法使用this
    let mouseRef = ref();
    console.log(mouseRef);
    let myinp = ref();
    console.log(myinp);
    // vue3的编程式 跳转
    let router = useRouter();

    let turnHello = () => {
      // vue3的编程式 跳转
      // router.push({ name: "hello", query: { username: "小王" } });
      // router.replace() 跳转不产生历史记录
      // router.replace({ name: "hello", query: { username: "小王" } });
    };
    // 组件内部的钩子
    onBeforeRouteLeave((to, from, next) => {
      console.log(to);
      console.log(from);
      next();
    });
    //

    // 提前操作dom  在created操作dom
    // vue3中 可以导入nextTick 使用
    // nextTick 等待dom更新完毕后  在去操作
    nextTick(() => {
      console.log(mouseRef.value);
      mouseRef.value.style.background = "blue";
    });
    // 组件挂载后
    onMounted(() => {
      //  console.log(mouseRef.value)
      //  mouseRef.value.style.background="blue"
      myinp.value.focus();
      myinp.value.value = "做大做强";
    });

    return {
      x,
      y,
      mouseRef,
      myinp,
      turnHello,
    };
  },
});
</script>